<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>B站大会员页面</title>
		<style>
			#BzhanVIP{
				background-color: #00a0d8;
				background-image: url(img/rl_top.35edfde.png) no-repeat;
				text-align: center;
				height: 86.28px;
			}
			*{
				padding: 0px;
				margin: 0px;
				list-style: none;
				text-decoration: none;
			}
			#box{
				width: 1131px;
				height: 3300px;
				border: 1px solid lightgray;
				box-shadow: 1px 2px 2px 2px #e7e7e7;
				border-radius: 4px;
				text-align: center;
				margin-top: 32px;
				padding-bottom: 82px;
			}
			#leftmel .p{
				width: 173px;
				height: 58px;
				border-top: gray;
				line-height: 65px;
				color: darkgray;
				font-size: 17px;
				border-bottom: 1px solid lightgrey;
			}
			#leftmel{
				background-color: ghostwhite;
				width: 173px;
				height: 3456px;
				border-bottom: 1px solid lightgrey;
				border-right: 2px solid lightgrey;
			}
			#leftmel a{
				text-align: center;
				text-decoration: none;
				display: block;
				color: black;
				width: 173px;
				height: 56px;
				line-height: 55px;
				font-size: 17px;
				float: left;
			}
			#leftmel a:nth-of-type(14){
				border-top: 1px solid lightgrey;
				border-bottom: 1px solid lightgrey;
			}
			#leftmel a:nth-of-type(15){
				border-bottom: 1px solid lightgrey;
			}
			#leftmel a:nth-of-type(16){
				border-bottom: 1px solid lightgrey;
			}
			#leftmel a:nth-of-type(17){
				border-bottom: 2px double lightgrey;
			}
			#leftmel a:hover{
				background-color: lightgray;
			}
			#leftmel a:active { 
			color: white;
			background-color: #00A0D8;
			}
			.border-left{
				float: right;
				width: 956px;
				height: 58px;
				line-height: 62px;
				text-align: left;
				border-bottom: 1px solid lightgray;
			}
			.border-left span {
				color: #00A0D8;
				text-decoration: none;
			}
			.box-top{
				width: 5px;
				height: 20px;
				margin-left: 30px;
				display: inline-block;
				vertical-align: middle;
				background-color: #00A0D8;
				border-radius: 2px 2px 2px 2px;
			}
			.xf{
				width: 85px; 
				height: 32px; 
				color: white; 
				background-color: #00A0D8; 
				border-radius: 3px; 
				border:1px solid lightgray;
			}
			.xf:hover{
				background-color: #00b0eb;
			}
			.zs{
				width: 85px; 
				height: 32px; 
				background-color: white;
				border-radius: 3px; 
				border:1px solid lightgray;
			}
			.zs:hover{
				color: white;
				background-color: #00b0eb;
			}
			#image{
			  width: 900px;
			  height: 500px;
			  align-items: center;
			  margin: 5% auto;
			  margin-top: 0%;
			}
			#hd{
			  position: relative;
			  height: 400px;
			}
			#hd ul{
			  list-style-type:none ;
			}
			#hd ul>li{
			  width: 600px;
			  height: 300px;
			  position: absolute;
			
			  transition: 1s;
			  opacity: 0;
			}
			#hd ul>li img{
			  width: 900px;
			  height: 500px;
			  border-radius: 10%;
			  border: 15px solid #fffbd6;
			}
			#image ol {
			  position: relative;
			  display: grid;
			  grid-template-columns: repeat(5,75px);
			  grid-template-rows: auto;
			  grid-gap: 1em;gap: 1em;
			  float: right;
			  margin-top: 450px;
			  list-style: none;
			  top:0;left:0;
			}
			#image ol li {
			  width: 25px;
			  height: 10px;
			  font-size: 15px;
			  line-height: 20px;
			  float: left;
			  text-align: center;
			  border-radius: 2em;
			  border: 5px solid #999999;
			}
		</style>
	</head>
	<body>
		<div id="BzhanVIP">
			<img src="img/rl_top.35edfde.png"/>
		</div>
		<center>
			<div id="box">
				<div class="border-left">
					<div class="box-top"></div>
					<span>大会员</span>
				</div>
				<div id="leftmel">
					<p class="p">个人中心</p>
					<a href="#">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</a>
					<a href="#">大&nbsp;会&nbsp;员</a>
					<a href="#">会员积分</a>
					<a href="#">我的信息</a>
					<a href="#">我的头像</a>
					<a href="#">粉丝勋章</a>
					<a href="#">成就勋章</a>
					<a href="#">账号安全</a>
					<a href="#">黑名单管理</a>
					<a href="#">我的硬币</a>
					<a href="#">我的记录</a>
					<a href="#">实名认证</a>
					<a href="#">邀请注册</a>
					<a href="#">个人空间</a>
					<a href="#">我的钱包</a>
					<a href="#">创作中心</a>
					<a href="#">直播中心</a>
				</div>
			</div>
			<div id="image">
				<div id="hd">
					<img src="img/60b4b6873aa595a3443916551d0d8934199fcd4b.png" >
					<img src="img/0149c655499e9217b87b832a64e0bdc931b52ccf.png" >
				</div>
			</div>
		</center>
	</body>
</html>